<template>
  <a-card class="fromBox" title="筹资项目申报">
    <template #extra>
      <a-tooltip placement="top">
        <template #title>
          <span>返回上级</span>
        </template>
<<<<<<< HEAD
        <a-button size="small" @click="getOut">
          <RollbackOutlined />
        </a-button>
      </a-tooltip>
    </template>
    <div class="Funding-content">
      <a-form ref="formRef" :model="formState" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol"
        labelWrap="true">
=======
        <a-button size="small" @click="getOut"> <RollbackOutlined /></a-button>
      </a-tooltip>
    </template>
    <div class="Funding-content">
      <a-form ref="formRef" :model="formState" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol" labelWrap="true">
>>>>>>> yx
        <div class="fromBox">
          <h3 style="font-size: 17px; color: rgb(71, 143, 202) !important; font-weight: bolder">申请信息：</h3>
          <a-form-item label="项目名称" name="blprojectname">
            <a-input v-model:value="formState.blprojectname" placeholder="请填写" />
          </a-form-item>
          <a-form-item label="长期筹资" name="bltype">
            <a-radio-group v-model:value="formState.bltype">
              <a-radio :value="1">是</a-radio>
              <a-radio :value="0">否</a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item label="筹资目标" name="blfinancmoney">
            <a-input-number v-model:value="formState.blfinancmoney" placeholder="请填写" :min="0" style="width: 200px" />
            <span style="color: red">(单位/元)</span>
          </a-form-item>
          <a-form-item label="申报单位" name="blsubject">
            <a-select v-model:value="formState.blsubject" placeholder="请选择项申报单位" allowClear>
              <a-select-option :value="item.blname" v-for="(item, index) in Deport">{{ item.blname }}</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="负责人姓名" name="blleader">
            <a-input v-model:value="formState.blleader" placeholder="请填写" />
          </a-form-item>
          <a-form-item label="联系人姓名" name="bllinker">
            <a-input v-model:value="formState.bllinker" placeholder="请填写" />
          </a-form-item>
          <a-form-item label="联系电话" name="bllinktel">
            <a-input v-model:value="formState.bllinktel" placeholder="请填写" />
          </a-form-item>
        </div>
        <div>
          <h3 style="font-size: 17px; color: rgb(71, 143, 202) !important; font-weight: bolder">项目信息：</h3>
          <a-form-item label="项目描述" name="blbrief">
            <a-textarea v-model:value="formState.blbrief" :rows="12" placeholder="简单描述项目用途及目的,200字以内" />
          </a-form-item>
          <a-form-item label="项目简介" name="bldetail">
            <a-textarea v-model:value="formState.bldetail" :rows="12" placeholder="包含项目的用途、预期效果、建议起捐额度、答谢方式等、500字以内" />
          </a-form-item>
          <a-form-item label="项目类型" name="blext3">
            <a-select v-model:value="formState.blext3" placeholder="请选择项目类型" allowClear>
              <a-select-option value="110周年校庆专题">110周年校庆专题</a-select-option>
              <a-select-option value="人才培养">人才培养</a-select-option>
              <a-select-option value="校园活动">校园活动</a-select-option>
              <a-select-option value="校友返校">校友返校</a-select-option>
              <a-select-option value="基础建设">基础建设</a-select-option>
              <a-select-option value="科研创新">科研创新</a-select-option>
              <a-select-option value="社会公益">社会公益</a-select-option>
              <a-select-option value="事业发展">事业发展</a-select-option>
            </a-select>
          </a-form-item>
        </div>
        <div>
          <h3 style="font-size: 17px; color: rgb(71, 143, 202) !important; font-weight: bolder">图片信息：</h3>
          <a-form-item label="图片上传">
<<<<<<< HEAD
            <a-upload list-type="picture-card" :before-upload="beforeUpload" @change="handleChange" :max-count="1"
              :accept="'image/jpg,image/jpeg,image/png'" :customRequest="customUpload" :file-list="fileList"
              @preview="handlePreview">
=======
            <a-upload
              list-type="picture-card"
              :before-upload="beforeUpload"
              @change="handleChange"
              :max-count="1"
              :accept="'image/jpg,image/jpeg,image/png'"
              :customRequest="customUpload"
              :file-list="fileList"
              @preview="handlePreview"
            >
>>>>>>> yx
              <div v-if="fileList.length <= 1">
                <PlusOutlined />
                <div style="margin-top: 8px">点击上传</div>
              </div>
            </a-upload>
            <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
              <img alt="example" style="width: 100%" :src="previewImage" />
            </a-modal>
            <span style="color: red">*上传的图片可为院徽,学院代表性建筑等具有代表性的图片*</span>
          </a-form-item>
        </div>
      </a-form>
    </div>
    <div class="steps-action">
      <a-space>
        <a-button type="primary" @click="onSubmit"> 提交 </a-button>
<<<<<<< HEAD
        <a-button @click="getOut">返回
          <ArrowRightOutlined />
        </a-button>
=======
        <a-button @click="getOut">返回<ArrowRightOutlined /></a-button>
>>>>>>> yx
      </a-space>
    </div>
  </a-card>
</template>

<script setup>
  import { reactive, ref, defineEmits, onMounted, toRaw, watch, defineProps } from 'vue';
  import { message } from 'ant-design-vue';
  import { smartSentry } from '/@/lib/smart-sentry';
  import { SmartLoading } from '/@/components/framework/smart-loading';
  import { Funding } from '../../../api/funding/funding-api';
  import dayjs from 'dayjs';
  // 选择单位
  const Deport = ref([]);
  async function getInitDeport() {
    try {
      let res = await Funding.FindDanWei();
      Deport.value = res.data;
    } catch (error) {
      smartSentry.captureError(error);
    }
  }
  //图片上传
  function getBase64(file) {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => resolve(reader.result);
      reader.onerror = (error) => reject(error);
    });
  }
  const fileList = ref([]);
  const previewVisible = ref(false);
  const previewImage = ref('');
  const fileImg = ref();
  const isFlage = ref(false);
  //对上传图片做校验
  function beforeUpload(file) {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/png';
    if (!isJpgOrPng) {
      this.$message.error('只能上传jpg/png格式的图片');
    }
    const isLt2M = file.size / 1024 / 1024 < 10;
    if (!isLt2M) {
      this.$message.error('图片不得大于10MB!');
    }
    return isJpgOrPng && isLt2M;
  }
  function handleChange(data) {
    if (data.file.status == 'uploading') {
      //改变上传的状态显示图片
      data.file.status = 'done';
      fileList.value = [...data.fileList];
    } else if (data.file.status == 'removed') {
      //如果状态为remove就删除
      fileList.value = data.fileList;
      fileImg.value = '';
    } else if (data.file.status == 'error') {
      fileList.value = [];
    }
  }
  //预览图片的方法
  const handlePreview = async (file) => {
    if (!file.url && !file.preview) {
      file.preview = await getBase64(file.originFileObj);
    }
    previewImage.value = file.url || file.preview;
    previewVisible.value = true;
  };
  const handleCancel = () => {
    previewVisible.value = false;
  };
  function customUpload(file) {
    console.log(file, 'file');
    isFlage.value = true;
    fileImg.value = file.file;
  }

  //表单验证规则
  const formRef = ref();
  const labelCol = {
    span: 5,
  };
  const wrapperCol = {
    span: 15,
  };

  const formState = ref({});
  const rules = {
    blprojectname: [
      {
        required: true,
        message: '请填写项目名称',
        trigger: 'change',
      },
    ],
    bltype: [
      {
        required: true,
        message: '请选择是否长期筹资',
        trigger: 'change',
      },
    ],
    blfinancmoney: [
      {
        required: true,
        message: '请填写筹资目标',
        trigger: 'change',
      },
      {
        validator: (rule, value) => {
          if (value == 0) {
            return Promise.reject('请输入正确的筹资目标金额');
          }
          return Promise.resolve();
        },
        trigger: 'blur',
      },
    ],
    blleader: [
      {
        required: true,
        message: '请填写负责人姓名',
        trigger: 'change',
      },
    ],
    bllinker: [
      {
        required: true,
        message: '请填写联系人姓名',
        trigger: 'change',
      },
    ],
    bllinktel: [
      {
        required: true,
        message: '请填写联系人联系方式',
        trigger: 'blur',
      },
      {
        validator: (rule, value) => {
          // 自定义严重验证逻辑
          if (!/^1[3-9]\d{9}$|^0\d{2,3}-\d{7,8}$/.test(value)) {
            return Promise.reject('电话格式不正确');
          }
          return Promise.resolve();
        },
        trigger: 'blur',
      },
    ],
    blbrief: [
      {
        required: true,
        message: '请填写项目描述',
        trigger: 'change',
      },
    ],
    bldetail: [
      {
        required: true,
        message: '请填写项目简介',
        trigger: 'change',
      },
    ],
    blext3: [
      {
        required: true,
        message: '请填写项目类别',
        trigger: 'change',
      },
    ],
    blsubject: [
      {
        required: true,
        message: '请选择申报单位',
        trigger: 'change',
      },
    ],
  };
  const props = defineProps({
    DataId: String,
  });
  async function getInitdate() {
    try {
      let blfinancprojectid = props.DataId;
      let res = await Funding.FindDetail(blfinancprojectid);
      formState.value = res.blfinancproject;
      fileList.value = [
        {
          uid: res.blfinancproject.blfinancprojectid,
          name: res.blfinancproject.blattachment,
          status: 'done',
          url: res.blfinancproject.blattachaddress,
        },
      ];
    } catch (error) {
      smartSentry.captureError(error);
    }
  }
  const onSubmit = () => {
    formRef.value
      .validate()
      .then(() => {
        const formData = new FormData();
        if (fileList.value.length) {
          if (toRaw(formState.value).blauditstate == -1) {
            toRaw(formState.value).blauditstate = 0;
          }
          if (isFlage.value) {
            formData.append('file', fileImg.value);
            formData.append('entity', JSON.stringify(toRaw(formState.value)));
          } else {
            formData.append('entity', JSON.stringify(toRaw(formState.value)));
          }
          Funding.updateFunding(formData)
            .then((res) => {
              message.success('修改成功');
              fileImg.value = '';
              fileList.value = [];
              resetForm();
              getOut();
            })
            .catch((e) => {
              smartSentry.captureError(e);
            });
        } else {
          message.warning('图片未上传');
        }
      })
      .catch((error) => {
        console.log(error);
        message.warning('请检查表单是否有未填写或者格式错误');
      });
  };
  //添加方法
<<<<<<< HEAD
  function getAddFound() { }
=======
  function getAddFound() {}
>>>>>>> yx
  const resetForm = () => {
    formRef.value.resetFields();
  };
  const emit = defineEmits();
  //返回表格
  const getOut = () => {
    let obj = {
      type: 0,
    };
    emit('getBlack', obj);
  };

  onMounted(() => {
    getInitDeport();
    getInitdate();
  });
</script>

<style lang="scss" scoped>
  .Funding-content {
    width: 70%;
    border-radius: 6px;
    min-height: 510px;
    padding-top: 40px;
    margin: 20px auto;
  }

  .steps-action {
    margin-top: 24px;
    float: right;
  }

<<<<<<< HEAD
  .fromBox {}

=======
  .fromBox {
  }
>>>>>>> yx
  .jianjie span {
    display: block;
    font-size: 16px;
    padding-bottom: 20px;
    padding-left: 20px;
  }
<<<<<<< HEAD
</style>
=======
</style>
>>>>>>> yx
